<template>
   <div class="content">
        <el-card>
             <div class="welcome"><h1>欢迎登录后台管理系统</h1></div>
            
             <div class="dataBox">
            <div class="showDataBox">
                <img src="../assets/img/user.png" />
                <div class="numberBox">
                  <div class="numberName">用户数</div>
                  <div class="number">{{userTotal}}</div>
                </div>
            </div>

             <div class="showDataBox">
                <img src="../assets/img/stadium.png" />
                <div class="numberBox">
                  <div class="numberName">收录球馆</div>
                  <div class="number">{{stadiumTotal}}</div>
                </div>
            </div>

             <div class="showDataBox">
                <img src="../assets/img/order.png" />
                <div class="numberBox">
                  <div class="numberName">订单数量</div>
                  <div class="number">{{orderTotal}}</div>
                </div>
            </div>

             <div class="showDataBox">
                <img src="../assets/img/comment.png" />
                <div class="numberBox">
                  <div class="numberName">评论数量</div>
                  <div class="number">{{commentTotal}}</div>
                </div>
            </div>
       
      
            </div>
             <div class="userAgentBox">
                 <h2></h2>
             </div>
        </el-card>
       
   </div>
  
</template>

<script>
import Api from '../api'
export default {
    data() {
        return {
            userTotal:'暂无',
            stadiumTotal:'暂无',
            orderTotal:'暂无',
            commentTotal:'暂无'
        }
    },
    methods: {
        async getUserTotal(){
              const {data:res} = await Api.getTotalNum('user');
                 if(res.status !== 200 ) return;
                 this.userTotal = res.data;     
        },
        async getStadiumTotal(){
              const {data:res} = await Api.getTotalNum('stadium');
                 if(res.status !== 200 ) return;
                 this.stadiumTotal = res.data;     
        },
        async getOrderTotal(){
              const {data:res} = await Api.getTotalNum('order_list');
                 if(res.status !== 200 ) return;
                 this.orderTotal = res.data;     
        },
        async getCommentTotal(){
              const {data:res} = await Api.getTotalNum('comment');
                 if(res.status !== 200 ) return;
                 this.commentTotal = res.data;     
        }
    },
    created() {
        this.getUserTotal();
        this.getStadiumTotal();
        this.getOrderTotal();
        this.getCommentTotal();
    },
}
</script>

<style scoped lang="less">
    .content{
        .welcome{
            height: 80px;
            border-bottom: 3px solid #ddd;
            margin-bottom: 10px;
            border-radius: 5px;
            
        }
        .dataBox{
            width: 100%;
            height: 150px;
            background: rgb(236, 241, 244);
            display: flex;
            justify-content: space-around;
            align-items: center;
            .showDataBox{
                display: flex;
                background: rgb(255, 253, 253);
                width: 250px;
                height: 120px;
                border-radius: 10px;
                box-shadow: 0px 2px 2px rgb(108, 106, 106);
                transition:all 0.2s linear;
                img{
                    width: 120px;
                    background: #ddd;
                    border-radius: inherit;
                }
                .numberBox{
                    display: flex;
                    flex-direction: column;
                    width: 130px;
                    height: 120px;
                    color: rgb(125, 142, 171);
                    background: rgb(255, 255, 255);
                    justify-content: center;
                    border-radius: 10px;
                    .numberName{
                        font-weight: 600;
                        font-size: 1.5em;
     
                        width: 120px;
                        height: 50px;
                        text-align: center;
                        line-height: 50px;
                    }
                    .number{
                        font-weight: 600;
                        font-size: 1.2em;
                        width: 120px;
                        height: 50px;
         
                        text-align: center;
                        line-height: 50px;
                  
                    }
                }
            }
            .showDataBox:hover{
                transform: scale(1.1);
             
                 .numberBox{
                        color: rgb(130, 200, 224);
                 }
            }
        }
    }
</style>